vue中使用echarts实现动态数据绑定、获取后端接口数据

您所在的位置:网站首页 echarts series data 多个value vue中使用echarts实现动态数据绑定、获取后端接口数据

vue中使用echarts实现动态数据绑定、获取后端接口数据

2023-08-15 11:32| 来源: 网络整理| 查看: 265

之前几篇echarts的文章是实现了静态的柱状图、折线图、饼状图、地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定。

简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了。

1.柱状图

首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3

因为柱状图的数据有两个,横坐标和纵坐标,所以我们将传来的数据,横坐标做一个数组,纵坐标做一个数组。

首先在data中定义

lwData: {}, // 论文数据 lwndArr: [], // 年度数组 lwtsArr: [], // 论文发表天数数组

接着获取接口数据,把接口数据处理一下放进两个数组里。年度为横坐标,将data中传来的年度循环放入年度数组。天数为纵坐标,将data中传来的天数循环放入天数数组。

this.axios.post(this.counturl, { type:'paper' }).then(res => { if (res.result === '00000') { this.lwData = res.data for(let i=0;i


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3